<template>
  <div>
    <Backnav backTitle="发票信息填写"></Backnav>
    <!-- 输入任意文本 -->
    <van-field v-model="invoicename" label="发票类型:" readonly />
    <label for="" class="van-cell">
      <div class="van-field__label">发票抬头:</div>
      <van-radio-group v-model="radio" direction="horizontal">
        <van-radio name="1" checked-color="#4bd863">单位</van-radio>
        <van-radio name="2" checked-color="#4bd863">个人</van-radio>
      </van-radio-group>
    </label>
    <label for="" class="van-cell">
      <div class="van-field__label">发票内容:</div>
      <select name="classify" id="" class="classify">
        <option value="0" disabled selected>请选择</option>
        <option value="1">商品明细</option>
        <option value="2">商品类别</option>
      </select>
    </label>

    <!-- 允许输入正整数，调起纯数字键盘 -->

    <!-- <van-icon name="arrow" /> -->
    <template v-if='radio==1'>
      <van-field
        v-model="placeDetail"
        label="单位名称:"
        placeholder="请输入单位名称"
      />
      <!-- 允许输入数字，调起带符号的纯数字键盘 -->
      <van-field
        v-model="number"
        type="number"
        label="纳税人识别号:"
        placeholder="请输入纳税人识别号"
      />
    </template>

    <van-button type="primary" block class="btn">确定</van-button>
  </div>
</template>

<script>
import Backnav from "../../components/nav/Backnav";
import { areaList } from "@vant/area-data";
export default {
  name: "Invoice",
  components: { Backnav },
  data() {
    return {
      invoicename: "普通发票",
      usertel: "",
      placeDetail: "",
      number: "",
      select: "",
      showArea: false,
      areaList: areaList, // 数据格式见 Area 组件文档
      radio: "1",
    };
  },
  methods: {
    onConfirm(values) {
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      this.showArea = false;
    },
  },
};
</script>

<style lang='less'scoped>
.btn {
  width: 85%;
  height: 35px;
  /* margin-top: 200px; */
  bottom: 50px;
  position: fixed;
  margin-left: 28px;
  background-color: #4bd863;
}
.classify {
  border: none;
  width: 100%;
   outline: none;
  & > option {
    border: 0;
    border-radius: 0;
  }
}
</style>